<template>
	<view class="px-3 mt-1 rounded py-2" hover-class="item-hover" :style="[$em.$getThemeStyle(['bg-color-1'])]">
		<view class="list-item flex-1"  >
		 <view class="pr-3" >
		     <view >
				 <image style="width: 80rpx;height: 80rpx;border-radius: 80rpx;" :src="config.imgUrl + item.avatar"></image>
		     </view>
		 </view>
		 <view class="flex-1 flex-column flex-1 border-bottom">
		 	<view class="flex-1 flex-row justify-between">
		 		<text class="font-weight-bold" style="font-size: 32rpx;">{{item.nickname}}</text>
		 		<!-- <text style="font-size: 28rpx;font-weight: 400;color:#E87879">{{item.money}}</text>	 -->		  
		 	</view>
		 	<view class="flex-row flex-1 justify-between">
		 		<text class="mt-1" style="font-size: 26rpx;color: #A0A0A0;">邀请时间：{{item.createtime | transformTimestamp}}</text>		
		 		<text class="mt-1" style="font-size: 28rpx;color: #A0A0A0;" :style="statusColor">{{item.iscl | transformStatus}}</text>					  
		 	</view>			
		 </view>
		</view> 
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	//const animation = weex.requireModule('animation');
	// #endif
	//import name from '';
	  import { mapState } from 'vuex'
	let app = {}
	// #ifdef MP-WEIXIN || MP-KUAISHOU
	app = getApp({ allowDefault: true}).$vm
	// #endif
	// #ifdef APP-PLUS || H5
	app = getApp({allowDefault: true})
	// #endif
	export default {
		name: 'comb-loader',
		props: {
			// 加载中的文字
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				is_deleted:false
			};
		},
		filters:{
			transformTimestamp(value = Date.now()/1000, format = "Y-M-D h:m:s") {
				 const formatNumber = n => `0${n}`.slice(-2);
				    const date = new Date(value*1000);
				    const formatList = ["Y", "M", "D", "h", "m", "s"];
				    const resultList = [];
				    resultList.push(date.getFullYear().toString());
				    resultList.push(formatNumber(date.getMonth() + 1));
				    resultList.push(formatNumber(date.getDate()));
				    resultList.push(formatNumber(date.getHours()));
				    resultList.push(formatNumber(date.getMinutes()));
				    resultList.push(formatNumber(date.getSeconds()));
				    for (let i = 0; i < resultList.length; i++) {
				        format = format.replace(formatList[i], resultList[i]);
				    }
				    return format;
			},
			transformStatus(value) {
				//	1未审核, 2已审核, 3已驳回,4已到账	
				if(value == 1) return "未审核";
				if(value == 2) return "已审核";
				if(value == 3) return "已驳回";
				if(value == 4) return "已到账";
				return value
			},
		},
		computed: {
			...mapState([
				'systemInfo', 
				'config',
				'userInfo'
			]),
			statusColor(){
				//	1未审核, 2已审核, 3已驳回,4已到账
				let status = this.item.iscl
				if(status == 1) return "color: #F1A532;";
				if(status == 2) return "color: #F1A532;";
				if(status == 3) return "color: #F56C6C;";
				if(status == 4) return "color: #53C21D;";
				return "color: #F1A532;"
			},
			statusStr(){
				const {type ,shtype} = this.item
				//return shtype
				if(shtype == 3) return "退款中";
				if(shtype == 4) return "退货中";
				if(shtype == 5) return "已退款";
				if(shtype == 6) return "已退货";
				
				if(type  == 1) return "待支付";
				if(type  == 2) return "等待卖家发货";
				if(type  == 3) return "卖家已发货";
				if(type  == 4) return "待评价";
				if(type  == 9) return "订单已关闭";
			},
			confirmBtns() {
			  return {
			    iconUnicode: '\ueb7a',
			    styles: {
			      btn: app.$getThemeStyle(['bg-color-101']),
			      icon: app.$getThemeStyle(['color-102'])
			    }
			  }
			}
		},
		created() {
			this.$em = app.$em
		},
		destroyed() {
		
		},
		methods: {
			getStatusColor(value){
				//	1未审核, 2已审核, 3已驳回,4已到账
				if(value == 1) return "color: #F1A532;";
				if(value == 2) return "color: #F1A532;";
				if(value == 3) return "color: #F56C6C;";
				if(value == 4) return "color: #53C21D;";
				return value
			},
			removeConfirm(){
				this.$refs.confirm.open({
					title:"确定要取消该订单吗?",  
					duration:3000,
					confirm:()=>{
						this.cancel()
					}		  
				})	  
			},
			 cancel(){
				uni.$http.get("/api/shoporder/qxorder",{
					id:this.item.id
				}).then(res=>{
					uni.showToast({
						  icon: 'success',
						  title: '已取消'
					})
					this.is_deleted = true		 
				})
				.catch(err=>{
					console.log("err",err)
				})
				
			}
		}
	}
</script>

<style>

  .list {
    padding-top: 0px;
  }

  .list-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .list-item-info {
    flex-direction: row;
    justify-content: space-between;
  }

  .list-item-info-id {
    font-size: 15px;
    font-weight: 700;
  }

  .list-item-info-time {
    font-size: 12px;
  }


  .list-item-operate {
    
    flex-direction: row;
  }

  .list-item-operate-btn {
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
	margin-top: 20px;
  }


 .list-item-operate-btn-center {
	 
  }
  .list-item-operate-btn-left {
    margin-right: 10px;
  }

  .list-item-operate-btn-right {
    margin-left: 10px;
  }

  .list-item-operate-btn-text {
    font-size: 14px;
    font-weight: 700;
	
  }
  
  .list-item-info-default {
    background-color: #FF0000;
    height: 22px;
    padding: 0 8px;
    justify-content: center;
    border-radius: 4px;
  }
  .list-item-info-default-text {
    line-height: 10px;
    font-size: 10px;
    color: #FFFFFF;
  	text-align: center;
  }
  
  .header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
  }
  
  .scroller {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .banner {
    /* position: sticky; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  
  .banner-image-wrap {
    flex-direction: row;
  }
  
  .banner-image {
    flex: 1;
  }
  
  .banner-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.28);
  }
  
  .banner-word {
    position: absolute;
    justify-content: center;
    transform: translate(-50%, -50%);
  }
  
  .banner-word-title {
    text-align: center;
    font-size: 29px;
    font-weight: 700;
    color: #FFFFFF;
  }
  
  .banner-word-info {
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
  	margin-top: 15px;
  }
  
  .content-wrap {
    margin-top: -28px;
  }
  
  .content {
    border-radius: 28px;
  }
  

  .list {
    padding: 0 18px;
  }
  .list-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  

  

  
  .list-item-info {
    margin-left: 18px;
  }
  
  .list-item-title {
    line-height: 19px;
    font-size: 15px;
    font-weight: 700;
  }
  
  .list-item-price {
    margin-top: 5px;
    font-size: 12px;
  }
  
  .list-item-btn {
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 42px;
  }
  

  .border-bottom{
  	  border-color: #EBEBEB;
  	  border-bottom: 2px;
  }
  
  
  
</style>